<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分类</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover">
    <script src="data.js" charset="utf-8"></script>
    <script>
        window.onload=function(){
            var rate = 3.75;
            wh = document.body.clienWidth||document.documentElement.clientWidth;
            document.documentElement.style.fontSize = wh/rate+"px";
        }
    </script>
    <style>
        *{
            padding:0;
            margin:0;
            box-sizing:border-box;
            border:none;
        }

        .top{
            width:100%;
            height:0.44rem;
            background:lightblue;
            position: relative;
        }
        .fl{
            float:left;
        }
        .clearfix:after{
            display:table;
            content:"";
            clear:both;
        }
        .top img{
            position:absolute;
            top:0.12rem;
            left:6px;
        }
        .top input{
            padding:0.05rem;
            border-radius: 0.14rem;
            border:none;
            margin-left:0.5rem;
            margin-top:0.09rem;
            width:2.6rem;
            text-indent:0.26rem;
            background:#f7f7f7;
            float:left;
        }
        .top .img img{
            position: absolute;
            left:0.55rem;
        }
        .top .more img{
            position: absolute;
            left:3.34rem;
            top:0.06rem;
        }
        .btn{
            position:fixed;
            bottom:0;
            width:100%;
            height:0.5rem;
            background:lightblue;
        }
        body,html{
            height:100%;
        }
        .content{
            display:flex;
            height:5.74rem;
        }
        .sub_nav{
            width:0.86rem;
            min-width:0.86rem;
            height:100%;
            background:#f8f8f8;
            overflow-y:auto;
            line-height:0.34rem;
            font-size:0.14rem;

            text-align: center;
        }
        .cat_list{
            width:2.89rem;
            height:100%;
            background:#fff;
            overflow-y:auto;
            text-indent:0.03rem;
        }
        .div_active{
            color:orange;
            background:#fff;
        }
        .cat{
            margin:0.04rem;
            font-size:0.12rem;
            text-align: center;

        }
    </style>
</head>
<body>


<div class="all">
    <div class="top">
        <img src="images/1.png">
        <input placeholder="照相打印机" />
        <div class="img"><img src="images/search3.png" /> </div>
        <div class="more"><a href="#"><img src="images/more%20.png" /></a></div>
    </div>
    <div class="content">
        <div class="sub_nav" id="leftnav"></div>
        <div class="cat_list" id="cat_list"></div>
    </div>
    <div class="btn"></div>
</div>

<script>
    console.log(data);
    var arrs =data.json.keywordAreas;
    for(var i=0;i<arrs.length;i++){
        var a = arrs[i];
        var navLi=document.createElement("div");
         navLi.index = i;
         navLi.onclick=function(){
             loadCatData(this.index);
             clearNavLiClassName();
             this.className ="div_active";
         };

        if(i==0){
            navLi.className="div_active";
        }
        navLi.innerHTML=a.areaName;
        leftnav.appendChild(navLi);
    }

    function clearNavLiClassName(){
        var divs = leftnav.getElementsByTagName("div");
        for(var i=0;i<divs.length;i++){
            divs[i].className="";
        }
    }

    loadCatData(0);
    function loadCatData(num) {
        cat_list.innerHTML="";
        var arrs2 = arrs[num].level1words;
        for(var j=0;j<arrs2.length;j++){
            var a2 = arrs2[j];
            var navLi = document.createElement("div");
            navLi.innerHTML = a2.keyword;
            navLi.style.fontSize="16px";
            navLi.style.fontWeight="700";
            navLi.style.lineHeight="40px";
            cat_list.appendChild(navLi);

            var smallcatList = document.createElement("div");
            smallcatList.className = "smallcatList clearfix";
            var arrs3 = a2.level2words;
            for(var k=0;k<arrs3.length;k++){
                var a3 = arrs3[k];

                var catDiv = document.createElement("div");
                catDiv.className="cat fl";
                catDiv.style.width="30%";
                var imageDiv= document.createElement("img");
                imageDiv.src="http:"+a3.imageUrl;
                imageDiv.style.width="100%";
                var txtDiv = document.createElement("div");
                txtDiv.innerHTML = a3.keyword;

                txtDiv.onclick = function(){
                    location='https://so.m.jd.com/ware/search.action?keyword='+this.innerHTML+'&searchFrom=category';
                };
                catDiv.appendChild(imageDiv);
                catDiv.appendChild(txtDiv);
                smallcatList.appendChild(catDiv);
            }
            cat_list.appendChild(smallcatList);
        }
    }
</script>





</body>
</html>